<template>
  <text class="head"> 手机号码登录</text>
  <view class="login_form">
    <form class="form_view" @submit="onSubmit">
      <view class="input_box">
        <input
          class="input"
          type="text"
          v-model="formData.phone"
          placeholder="请输入手机号"
        />
        <DeletcIcon
          v-show="formData.phone"
          @click="formData.phone = ''"
        ></DeletcIcon>
      </view>
      <view class="input_box">
        <input
          class="input"
          type="text"
          v-model="formData.code"
          placeholder="请输入验证码"
        />
        <SendCode></SendCode>
      </view>

      <Agreement></Agreement>

      <view class="submit_view">
        <up-button
          :hairline="false"
          color="#eb5757"
          text="登录"
          shape="circle"
          class="submit_btn"
        ></up-button>
      </view>
    </form>
    <view class="toggle">
      <text class="text" @click="emits('toggle', 2)"> 账户密码登录 </text>
      <text class="or">|</text>
      <text class="text" @click="emits('toggle', 3)"> 新用户注册</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import SendCode from "./SendCode.vue";
import Agreement from "./Agreement.vue";
import DeletcIcon from "./DeletcIcon.vue";
const formData = reactive({
  phone: "",
  code: "",
});
const emits = defineEmits(["toggle"]);
function onSubmit(e) {
  console.log(e);
}
</script>

<style lang="scss" scoped>
@import "./form.scss";
.login_form {
}
</style>
